<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛亚星的星球</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/baguetteBox.min.css">
    <link rel="stylesheet" href="../css/thumbnail-gallery.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        body{
            height: 100%;
            min-height: 750px;
            background: url(../images/bg-base-1.jpg) repeat;
        }
        #content {
            width: 80%;
            height: 100%;
            margin: 100px auto 0;
            padding-bottom: 50px;
            background: #fff;
            box-shadow: 0 0 5px rgba(0,0,0,0.20);
            position: relative;
            z-index: 10;
            border-top: 5px solid #ea7716;
        }
        html section button{
            font-size: 20px;
            padding: 12px 12px;
        }
        @media (max-width:620px){
            #content {
                width: 90%;
                height: 100%;
                margin: 50px auto 0;
                padding-bottom: 50px;
            }
            .articles{
                margin: 5px;
            }
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-logo">
                    <!--<img src="images/github-button.png" class="w70 h70 mt5" alt="">-->
                    <span class="f18 pr c-fff">yext blog</span>
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="templates/personal.html" class="f14"><i class="glyphicon glyphicon-sunglasses mr5"></i>关于我</a></li>
                    <li class="dropdown"><a href="" class="f14"><i class="glyphicon glyphicon-road mr5"></i>游戏天梯</a></li>
                    <li class="dropdown"><a href="" class="f14"><img src="../images/dota_on.png" alt="" class="b">dota2</a></li>
                    <li class="dropdown"><a href="" class="f14"><i class="glyphicon glyphicon-send mr5"></i>code模块</a></li>
                    <li><div class="myhome"><a href="javascript:;"><img src="http://www.jq22.com/tx/18.png" alt=""></a></div></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section>
    <div class="container-fluid" id="content" style="min-height: 325px;">
        <div class="title_index">
            <span></span>
            <h3>
                <a href="../index.html">Hmoe</a><a href="javaScript:;">/高光时刻</a>
            </h3>
        </div>
        <div class="tz-gallery">

            <div class="row">

                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/bg-rpg.jpg">
                            <img src="../images/bg-rpg.jpg" alt="Park">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/bg-download.jpg">
                            <img src="../images/bg-download.jpg" alt="Bridge">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/work.jpg">
                            <img src="../images/work.jpg" alt="Tunnel">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/work.jpg">
                            <img src="../images/work.jpg" alt="Coast">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/work.jpg">
                            <img src="../images/work.jpg" alt="Rails">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <a class="lightbox" href="../images/work.jpg">
                            <img src="../images/work.jpg" alt="Traffic">
                        </a>
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
<footer>
    <div id="bottom">
        <div class="row">
            <div class="col-md-2 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">Link</h3>
                <ul>
                    <li><a href="javaScript:;">大事记</a></li>
                    <li><a href="javaScript:;">我的网址link</a></li>
                    <li><a href="javaScript:;">dota2动态</a></li>
                    <li><a href="javaScript:;">大事记</a></li>
                    <li><a href="javaScript:;">开源中国</a></li>
                    <li><a href="javaScript:;">斗鱼</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">Copy</h3>
                <p class="ml20">本站部分文章、资源来自互联网，版权归原作者及网站所有，如果侵犯了您的权利，请及时致信告知我站.</p>
            </div>
            <div class="col-md-3 col-md-offset-1 col-xs-11">
                <h3 class="link_h3">About</h3>
                <p class="ml20"><a href="javaScript:;">给我留言</a></p>
                <p class="ml20"><a href="javaScript:;">我的微信</a></p>
                <p class="ml20"><img style="width: 150px;height: 150px;" src="../images/weixin.png" alt=""></p>
            </div>
        </div>
    </div>
</footer>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/baguetteBox.min.js"></script>
</body>
<script>
    $(function(){
            baguetteBox.run('.tz-gallery');
    });
</script>
</html>